<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        #main {
            width: 400px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex; /* Safari */
            /*在弹性盒对象的 <div> 元素中的各项周围留空白：  -webkit-是对沙发浏览器起作用的*/
            /*-webkit-justify-content: space-around; !* Safari 6.1+ *!*/
            display: flex;
            /*在弹性盒对象的 <div> 元素中的各项周围留空白：*/
            /*justify-content: space-around;*/
            justify-content: space-between;
        }

        #main div {
            width: 70px;
            height: 70px;
        }
    </style>
</head>
<body>

<div id="main">
    <div style="background-color:coral;"></div>
    <div style="background-color:lightblue;"></div>
    <div style="background-color:khaki;"></div>
    <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>
</html>